<script setup lang="ts">
import { reactive } from 'vue'
type ITableData = {
  date: string
  name: string
  address: string
  age: number
}
interface IPageData {
  tableData: ITableData[]
  loading: boolean
}
const pageData: IPageData = reactive({
  tableData: [],
  loading: true
})
const getData = () => {
  pageData.loading = true
  setTimeout(() => {
    const res = [
      {
        date: '2023-12-21 14:53',
        name: '刘德华',
        address: '香港',
        age: 50
      },
      {
        date: '2023-12-21 14:53',
        name: '郭富城',
        address: '香港',
        age: 50
      },
      {
        date: '2023-12-21 14:53',
        name: '张学友',
        address: '香港',
        age: 50
      }
    ]
    pageData.loading = false
    pageData.tableData = res
  }, 2000)
}
getData()
</script>

<template>
  <el-table v-loading="pageData.loading" :data="pageData.tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
